<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html >
<head>
	<meta charset="UTF-8">
	<title>凯胜项目管理系统</title>
	<link rel="stylesheet" href="static/css/bootstrap.min.css" />
	<link rel="stylesheet" href="static/css/daohang.css" type="text/css" />
	<link rel="stylesheet" href="static/css/style.css" type="text/css" />
	<style type="text/css">
		.icon-while{
			background-image: url("img/glyphicons-halflings-white.png");
		}
		
		.content{float:right;position:relative;overflow:hidden;}
		.content .shadow{margin-top:20px;position:absolute;}
		.menu{positive:absolute;text-align:center}
		.content .back{margin:auto 10px;-moz-transition-duration:2s;-o-transition-duration:2s;-webkit-transition-duration:2s;background-color:#EED8AE;border-radius:5px;height:0px;}
		.content:hover div.back{margin:auto 10px; width:200px; height:auto;text-align:center}
		.record{text-align:right}
	</style>
</head>
<body>
	<%@ include file="include/top2.jsp" %>
	<jsp:include page="include/top.jsp">
		<jsp:param value="contact" name="tag"/>
	</jsp:include>
	<div class="container">
		<div class="row">
			<div class="span9">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
					<li class="active">
						<a href="#"><i class="icon-user"></i>联系人</a>
					</li>
				</ul>
				<br />
				<div class="row">
				
					<div class="span3">
						
						<a href="contact.jspx?m=add" class="btn span2 btn-success"><i class="icon-plus icon-while"></i>添加联系人</a><br />
						<div class="clear"></div>
							<c:forEach items="${con }" var= "p">
								<ul class="unstyled" style="margin-top:15px">
									<li style="line-height:30px">
									<i class="icon-list-alt"></i><a href="#" id="btn" >${p.name }</a><input type="hidden" id="${p.id}" value="${p.id}"/>
								</ul>
							</c:forEach>
						</div>
						<div class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px" id="span">
							<address>
								<h3 id="h3"></h3>
								<p id="p2"></p>
								<small id="ss"></small> <br/>
								固话<small id="ss2"></small><br/><br/>
								邮箱<small id="ss3"></small><br/>
								地址<small id="ss4"></small> <br/><br/>
								主页<a href="http://www.kaishengit.com"><small id="ss5"></small></a> <br/>
								微博<a href="https://twitter.com/fankay"><small id="ss6"></small></a> <br/>
							</address>
							<div class="line" id="line"><h4 id="h4">记录</h4>
									<p id="p3"></p>
									<blockquote>
										<small id="ss7"></small>
									</blockquote>
							</div>	
							<div class="content">
					
								<div class="menu"><div class="sub"></div></div>
										<div class="back">
										<span id="ss7">记录</span>
										<form action="contact.jspx?m=record&id=${c.id }">
											<textarea name="record"  cols="24" rows="3"></textarea>
											<input type="button" value="发布"  class="record" />
										</form>
									<blockquote>
									<p id="p5"></p>
										<small></small>
									</blockquote>
							</div>
							<div class="shadow"></div>
								</div>
							<br/><br/><br/>
							<div id="foot">
							<a class="btn btn-primary" href="contact.jspx?m=eidt&id=${c.id}"><i class="icon-pencil icon-white"></i>编辑</a>
							<a class="btn btn-danger" href="contact.jspx?m=del&id=${c.id}"><i class="icon-trash icon-white"></i>删除</a>
							</div>
							</div>
				
					
					<%-- <c:if test="${c.id != null || c.id != '' }">
						<div class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
							<address>
								<h3>${c.name}</h3>
								<p>焦作凯盛信息技术有限公司</p>
								<small>手机</small> ${c.phone }<br/>
								<small>固话</small>${c.tel }<br/><br/>
								<small>邮箱</small>${c.email }<br/>
								<small>地址</small> ${c.address }<br/><br/>
								<small>主页</small> <a href="http://www.kaishengit.com">c.home</a><br/>
								<small>微博</small> <a href="https://twitter.com/fankay">c.weibo</a><br/>
							</address>
							<div class="line"><h4>记录</h4></div>
								<c:forEach items="${c.comment}" var="d" varStatus="status" begin="0" end="1">
									<blockquote>
									${d.comment.message }
										<small>${d.user.userName} 发布于 &nbsp; ${d.time }</small>
									</blockquote>
								</c:forEach>
							<div class="content">
					
								<div class="menu">查看所有记录<div class="sub"></div></div>
										<div class="back">
										记录
										<form action="contact.jspx?m=record&id=${c.id }">
											<textarea name="record"  cols="24" rows="3"></textarea>
											<input type="button" value="发布"  class="record" />
										</form>
										
									
								<c:forEach items="d">
									<blockquote>
									${d.message }
										<small>${d.user.userName} 发布于 &nbsp; ${d.time }</small>
									</blockquote>
								</c:forEach>
							</div>
							<div class="shadow"></div>
								</div>
							<br/><br/><br/>
							<a class="btn btn-primary" href="contact.jspx?m=eidt&id=${c.id}"><i class="icon-pencil icon-white"></i>编辑</a>
							<a class="btn btn-danger" href="contact.jspx?m=del&id=${c.id}"><i class="icon-trash icon-white"></i>删除</a>
								
							</div>
					</c:if>--%>
				</div>  
					
			</div>
		</div>
		
	</div>
	
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/jqueryui.js"></script>
	<script type="text/javascript" src="static/js/jquery.illuminate.0.7.min.js"></script>
	
	
	<script type="text/javascript">
		$(document).ready(function(){
				
			$('#button').illuminate({
				'intensity': '0.5',
				'color': '#2c2c2c'
			});
				
		});
		
		/* ajax传值 */
		var xmlHttp;
    	
    	function createXMlHttpRequest() {
    		if(window.ActiveXObject) {
        		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        	} else {
        		xmlHttp = new XMLHttpRequest();
        	}
    	}
		
		document.getElementById("btn").onclick = function(){
    		createXMlHttpRequest();
    		
    		var contactid = document.getElementById("${p.id}").value;
    		
    		xmlHttp.open("get", "xml.jspx?contactid="+contactid, true);
    		xmlHttp.onreadystatechange = callback;
    		xmlHttp.send();
    	};
		
		function callback() {
    		if(xmlHttp.readyState == 4) {
    			if(xmlHttp.status == 200) {
    				var result = xmlHttp.responseXML;
    				var conArray = result.getElementsByTagName("contact");
    				document.getElementById("span").options.length = 1;
    				for(var i = 0;i < conArray.length;i++) {
    					var con = conArray[i];
    					
    					var id=con.getElementsByTagName("id")[0].childNodes[0].nodeValue;
    					var name=con.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    					var company=con.getElementsByTagName("company")[0].childNodes[0].nodeValue;
    					var tel=con.getElementsByTagName("tel")[0].childNodes[0].nodeValue;
    					var phone=con.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
    					var email=con.getElementsByTagName("email")[0].childNodes[0].nodeValue;
    					var address=con.getElementsByTagName("address")[0].childNodes[0].nodeValue;
    					var home=con.getElementsByTagName("home")[0].childNodes[0].nodeValue;
    					var weibo=con.getElementsByTagName("weibo")[0].childNodes[0].nodeValue;
    					var adstruct=con.getElementsByTagName("adstruct")[0].childNodes[0].nodeValue;
    					var createtime=con.getElementsByTagName("createtime")[0].childNodes[0].nodeValue;
    					
    					document.getElementById("contactid").value=id;
    					document.getElementById("h3").innerHTML=name;
    					document.getElementById("p2").innerHTML=company;
    					document.getElementById("ss").innerHTML=tel;
    					document.getElementById("ss2").innerHTML=phone;
    					document.getElementById("ss3").innerHTML=email;
    					document.getElementById("ss4").innerHTML=address;
    					document.getElementById("ss5").innerHTML=home;
    					document.getElementById("ss6").innerHTML=weibo;
    					
    					var comments = book.getElementsByTagName("comments")[0];
    					var comArray=comments.getElementsByTagName("comment");
    					for(var j = 0;j < comArray.length;j++) {
    						var com = comArray[j];
    						var message = com.getElementsByTagName("message")[0].childNodes[0].nodeValue;
    						var createTime = com.getElementsByTagName("createTime")[0].childNodes[0].nodeValue;
    						var username=com.getElementsByTagName("username")[0].childNodes[0].nodeValue;
    						
    						var p=document.createElement("p");
    						var text = document.createTextNode(message);
    						p.appendChild(text);
    						
    						var blockquote=document.createElement("blockquote");
    						
    						var small=document.createElement("small");
    						
    						var text2=document.createTextNode(username+"发布于："+createTime);
    						blockquote.appendchild(small);
    						document.getElementById("line").appendChild(p);
    						document.getElementById("line").appendChild(blockquote);
    						
    					}
    				}
    			} else {
    				alert("服务器暂时不可用，请稍后再试" + xmlHttp.status);
    			}
    		} else {
    			//loading
    		}
    	}
		
		
		
		
	</script>
</body>
</html>
